<template>
  <div class="container">
    <Breadcrumb />
    <a-card class="data-card" v-if="!khxqshow">
      <a-row>
        <a-col :flex="1">
          <a-form
            :model="formModel"
            :label-col-props="{ span: 6 }"
            :wrapper-col-props="{ span: 18 }"
          >
            <a-row :gutter="20">
              <a-col :span="5">
                <a-form-item field="examineName" label="考核名称">
                  <a-input
                    v-model="formModel.examineName"
                    placeholder="请输入考核名称"
                    allow-clear
                  />
                </a-form-item>
              </a-col>
              <!-- <a-col :span="5">
                <a-form-item field="username" label="时间">
                  <a-range-picker @change="onChangeTime" />
                </a-form-item>
              </a-col> -->
              <a-col :span="5">
                <a-space :size="18">
                  <a-button @click="openAdd(0)" type="primary">
                    <template #icon>
                      <icon-plus />
                    </template>
                    新增
                  </a-button>
                  <a-button type="primary" @click="onPageChange(1)">
                    <template #icon>
                      <icon-search />
                    </template>
                    搜索
                  </a-button>
                  <a-button @click="reset">
                    <template #icon>
                      <icon-refresh />
                    </template>
                    重置
                  </a-button>
                  <!-- <a-button type="primary" @click="openOper">
										操作日志
									</a-button> -->
                </a-space>
              </a-col>
            </a-row>
          </a-form>
        </a-col>
      </a-row>
      <a-divider style="margin-top: 0" />
      <a-table
        row-key="userId"
        :loading="loading"
        page-position="bottom"
        :pagination="pagination"
        :columns="columns"
        :data="renderData"
        :bordered="false"
        @page-change="onPageChange"
        @page-size-change="onPageSizeChange"
      >
        <template #option="{ record }">
          <a-space :size="18">
            <!-- <a-button @click="openAdd(record.id)" type="primary">
                添加下级
              </a-button> -->
            <a-button
              @click="openEdit(record)"
              type="outline"
              v-if="record.publishStatus == 0"
            >
              编辑信息
            </a-button>
            <a-button
              @click="openEdit(record)"
              type="outline"
              v-if="record.publishStatus == 1"
            >
              查看信息
            </a-button>
            <a-button @click="openEdittp(record)" type="outline">
              图谱信息
            </a-button>
            <!-- <a-button
              @click="openEdittp(record)"
              type="outline"
              v-if="record.publishStatus == 0"
            >
              绑定图谱
            </a-button>-->

            <!-- <a-button
              @click="openEdittp(record)"
              type="outline"
              v-if="record.publishStatus == 1"
            >
              查看图谱
            </a-button> -->
            <a-button type="outline" @click="uppublish(record)">
              {{ record.publishStatus == 1 ? '撤回' : '发布' }}</a-button
            >

            <!-- <a-button type="outline"> 查看详情 </a-button> -->
            <a-button status="success" @click="khjl(record)">
              考核记录
            </a-button>
            <a-button status="danger" @click="openDelete(record)">
              删除
            </a-button>
          </a-space>
        </template>
        <template #createTime="{ record }">
          <a-space :size="18">
            <div>{{ timerfn(record.endTime) ? '未结束' : '已结束' }}</div>
          </a-space>
        </template>

        <template #startTime="{ record }">
          <a-space :size="18">
            <div>{{ record.startTime }}~{{ record.endTime }}</div>
          </a-space>
        </template>
      </a-table>
    </a-card>
    <!-- 添加菜单 -->
    <a-modal
      v-model:visible="addShow"
      @cancel="handleCancel"
      :on-before-ok="handleCheck"
      :mask-closable="false"
      unmountOnClose
    >
      <template #title> 考核 </template>
      <a-form ref="addModel" :rules="rules" :model="addForm">
        <a-form-item field="examineName" label="考核名称">
          <a-input
            v-model="addForm.examineName"
            size="large"
            placeholder="请输入考核名称"
            :disabled="addForm.publishStatus == 1"
          />
        </a-form-item>

        <a-form-item field="startTime" label="开始时间">
          <a-date-picker
            v-model="addForm.startTime"
            style="width: 420px"
            show-time
            format="YYYY-MM-DD HH:mm:00"
            :disabled="addForm.publishStatus == 1"
          />
        </a-form-item>
        <a-form-item field="endTime" label="结束时间">
          <a-date-picker
            v-model="addForm.endTime"
            style="width: 420px"
            show-time
            format="YYYY-MM-DD HH:mm:00"
            :disabled-date="disabledDate"
            :disabled="addForm.publishStatus == 1"
          />
        </a-form-item>
        <a-form-item field="organizationId" label="考试班级">
          <!-- <a-tree
            :checkable="true"
            v-model="addForm.organizationId"
            :multiple="true"
            :max-tag-count="2"
            :only-check-leaf="true"
            :allow-clear="true"
            :allow-search="true"
            :data="treeData"
            :checked-strategy="checkedStrategy"
            @check="changefnd"
            placeholder="请选择考试班级"
            :fieldNames="{
              key: 'id',
              title: 'name',
              children: 'children',
            }"
            style="width: 420px"
            :disabled="addForm.publishStatus == 1"
          ></a-tree> -->

          <a-tree-select
            v-model="addForm.organizationId"
            :max-tag-count="2"
            :only-check-leaf="true"
            :allow-clear="true"
            :allow-search="true"
            :data="treeData"
            :checked-strategy="checkedStrategy"
            @change="changefnd"
            placeholder="请选择考试班级"
            :fieldNames="{
              key: 'id',
              title: 'name',
              children: 'children',
            }"
            style="width: 420px"
            :disabled="addForm.publishStatus == 1"
          ></a-tree-select>
        </a-form-item>
        <a-form-item field="remark" label="考试说明">
          <a-input
            v-model="addForm.remark"
            size="large"
            placeholder="请输入考试说明"
            :disabled="addForm.publishStatus == 1"
          />
        </a-form-item>
      </a-form>
    </a-modal>
    <!-- 新建图谱 -->
    <a-modal
      v-model:visible="addShowtp"
      @cancel="handleCancel"
      :on-before-ok="handleChecktp"
      :mask-closable="false"
      unmountOnClose
    >
      <template #title> 图谱 </template>
      <a-form ref="addModels" :rules="ruless" :model="addForms">
        <a-form-item field="medicineAtlasId" label="选择图谱">
          <a-select
            allow-search
            v-model="addForms.medicineAtlasId"
            @change="changefn"
            :style="{ width: '320px' }"
            :options="options"
            placeholder="请选择或者搜索图谱"
            :virtual-list-props="{ height: 200 }"
            :field-names="fieldNames"
          />
        </a-form-item>

        <a-form-item field="type" label="图谱分组">
          <a-select
            allow-search
            v-model="addForms.type"
            @change="changefn"
            :style="{ width: '320px' }"
            :options="optionss"
            placeholder="请选择图谱分组"
            :virtual-list-props="{ height: 200 }"
            :field-names="fieldNamess"
          />
        </a-form-item>
        <a-form-item field="imgClassificationStr" label="图谱分类">
          <a-select
            multiple
            v-model="addForms.imgClassificationStr"
            @change="changefn"
            :style="{ width: '320px' }"
            :options="optionsss"
            placeholder="请选择"
            :virtual-list-props="{ height: 200 }"
            :field-names="fieldNamesss"
          />
        </a-form-item>
      </a-form>
    </a-modal>
    <!-- 图谱信息 -->
    <a-modal
      v-model:visible="addShowtps"
      @cancel="handleCancel"
      :on-before-ok="handleCancels"
      :mask-closable="false"
      unmountOnClose
    >
      <template #title> 图谱信息 </template>
      <div v-if="examtplist[0] != null">
        <div v-for="item in examtplist" class="tplistbd" :key="item.id">
          <div class="tpnamelist">
            {{ item.medicineAtlasName }}-{{ item.typeName }}-{{
              item.imgClassificationName
            }}
          </div>
          <div class="jbred">
            <!-- 解除绑定 -->
            <a-button
              type="primary"
              status="danger"
              @click="JCbdfn(item)"
              :disabled="addForms.publishStatus == 1"
              >解绑</a-button
            ></div
          >
        </div>
      </div>

      <div class="addtpbd" @click="openEdittps">添加图谱绑定</div>
    </a-modal>

    <!-- 考核记录详情 -->
    <a-card class="data-card" v-if="khxqshow">
      <a-row>
        <a-col :flex="1">
          <a-form
            :model="formModel"
            :label-col-props="{ span: 6 }"
            :wrapper-col-props="{ span: 18 }"
          >
            <a-row :gutter="20">
              <a-col :span="5">
                <a-form-item field="examineName" label="考核详情">
                  <!-- <a-input
                    v-model="formModel.examineName"
                    placeholder="请输入考核名称"
                    allow-clear
                  /> -->
                  <a-button @click="resets">
                    <template #icon>
                      <icon-refresh />
                    </template>
                    返回
                  </a-button>
                </a-form-item>
              </a-col>
              <!-- <a-col :span="5">
                <a-form-item field="username" label="时间">
                  <a-range-picker @change="onChangeTime" />
                </a-form-item>
              </a-col> -->
              <a-col :span="5">
                <a-space :size="18">
                  <!-- <a-button @click="reset">
                    <template #icon>
                      <icon-refresh />
                    </template>
                    重置
                  </a-button> -->

                  <!-- <a-button type="primary" @click="openOper">
										操作日志
									</a-button> -->
                </a-space>
              </a-col>
            </a-row>
          </a-form>
        </a-col>
      </a-row>
      <a-divider style="margin-top: 0" />
      <a-table
        row-key="userId"
        :loading="loading"
        page-position="bottom"
        :pagination="paginations"
        :columns="columnss"
        :data="renderDatas"
        :bordered="false"
        @page-change="onPageChanges"
        @page-size-change="onPageSizeChanges"
      >
        <template #option="{ record }">
          <a-space :size="18">
            <!-- <a-button @click="openAdd(record.id)" type="primary">
                添加下级
              </a-button> -->

            <a-button @click="openEdittpd(record)" type="outline">
              详情({{ record.correct }}/{{ record.error }})
            </a-button>
            <!-- <a-button
              @click="openEdittp(record)"
              type="outline"
              v-if="record.publishStatus == 0"
            >
              绑定图谱
            </a-button>-->

            <!-- <a-button
              @click="openEdittp(record)"
              type="outline"
              v-if="record.publishStatus == 1"
            >
              查看图谱
            </a-button> -->

            <!-- <a-button type="outline"> 查看详情 </a-button> -->
          </a-space>
        </template>
        <template #createTime="{ record }">
          <a-space :size="18">
            <div>{{
              record.examineStatus == 1
                ? '考核中'
                : record.examineStatus == 2
                ? '已结束'
                : record.examineStatus == 1
                ? '已放弃'
                : ''
            }}</div>
          </a-space>
        </template>
      </a-table>
    </a-card>
    <!-- 选择考核试题 -->
    <div class="tcbox" v-if="ksshow">
      <div class="tctopbox">
        <div class="tctopname">考核详细信息</div>
        <div class="tcclose" @click="ksshow = false"
          ><icon-close :size="25"
        /></div>
      </div>
      <div class="tcmainbox">
        <div class="tcmainitem">
          <div class="tcitemname">选择图谱</div>
          <div class="tcitdes">
            <a-select
              :options="optionsd"
              placeholder="请选择图谱"
              :field-names="fieldNamesd"
              :style="{ width: '100%', height: '100%' }"
              @change="changefndd"
              v-model="medicineAtlasId"
            />
          </div>
        </div>
      </div>
      <div class="tsred" v-if="tipshow">请先选择图谱才能查看详情</div>
      <div class="startbox" @click="gostart">查看详情</div>
    </div>
    <div class="zzcbox" v-if="ksshow"></div>
  </div>
</template>
<script lang="ts" setup>
  import { computed, ref, reactive, watch, nextTick } from 'vue';
  import { useRouter } from 'vue-router';
  import useLoading from '@/hooks/loading';
  import { Message, Modal } from '@arco-design/web-vue';
  import {
    examineList,
    getKhlist,
    Uppublish,
    organizationTree,
    addExa,
    updateExa,
    delExa,
    tpList,
    tpXq,
    addtp,
    getTp,
    delatlas,
  } from '@/api/examine.ts';
  import { number } from 'echarts/core';
  //   考核记录列表
  const khjl = (item) => {
    getKhlist({
      examineId: item.examineId,
      pageNum: paginations.current,
      pageSize: paginations.pageSize,
    }).then((res) => {
      if (res.code == 200) {
        renderDatas.value = res.data;
        khxqshow.value = true;
        paginations.total = res.data.total;
        paginations.current = res.data.pageNum;
        console.log('考核记录列表', res.data);
      }
    });
  };
  // 图谱信息
  const addShowtps = ref(false);
  const openEdit = (item) => {
    addForm.value = Object.assign({}, item);
    addForm.value.organizationId = Number(item.organizationId);
    console.log('当前id');

    addShow.value = true;
  };
  // 新建一个存储一级
  const strategyOptions = [
    {
      value: 'all',
      label: 'show all',
    },
    {
      value: 'parent',
      label: 'show parent',
    },
    {
      value: 'child',
      label: 'show child',
    },
  ];
  // 查询并且修改绑定
  const changefnd = (i) => {
    console.log('当前选择的', i, '全部数据', treeData.value);
  };
  // 解除绑定
  const JCbdfn = (item) => {
    Modal.confirm({
      title: '提示',
      content: '确认解除吗？',
      onOk() {
        delatlas({
          id: item.id,
        }).then((res) => {
          if (res.code == 200) {
            Message.success({
              //   content: res.message,
              content: '解除成功',
            });
            addShowtp.value = false;
            tpList({
              pageNum: 1,
              pageSize: 100,
            }).then((res) => {
              if (res.code == 200) {
                console.log('查询图谱列表成功', res.data);
                options.value = res.data.list;
              }
            });
            fetchData();
          }
        });
      },
    });
  };
  // 查询是否已经绑定图谱
  const examtplist = ref('');
  const getTpfn = (item) => {
    examtplist.value = [];
    getTp({
      examineId: item.examineId,
    }).then((res) => {
      if (res.code == 200) {
        console.log('查询该考试相关联的图谱', res.data);
        examtplist.value = res.data;
      }
    });
  };
  // handleCancel
  const handleCancels = (done) => {
    addForms.value = [];
    addForm.value = [];
    addShowtps.value = false;
    done(false);
  };
  // 关闭
  const handleCancel = () => {
    // ;
    // addForms.value = [];
    addForm.value = [];
  };
  // 绑定图谱
  const fieldNames = {
    value: 'medicineAtlasId',
    label: 'medicineAtlasName',
  };
  const fieldNamess = {
    value: 'type',
    label: 'typeName',
  };
  const fieldNamesss = {
    value: 'imgClassification',
    label: 'imgClassificationName',
  };
  const options = ref('');
  const optionsss = ref('');
  const addShowtp = ref(false);
  const tpid = ref('');
  //   查询考核详情
  const fieldNamesd = {
    value: 'medicineAtlasId',
    label: 'medicineAtlasName',
  };
  const studentId = ref('');
  // 考核记录ID
  const examineRecordId = ref('');
  // 考核id
  // 定义当前选择考核的图谱
  const medicineAtlasId = ref('');
  // 选择考试
  const changefndd = () => {
    tipshow.value = false;
    console.log('当前选择的考核图谱id', medicineAtlasId.value);
  };
  const ksshow = ref(false);
  const examineId = ref('');
  const optionsd = ref([]);
  const tipshow = ref(false);

  const openEdittpd = (item) => {
    ksshow.value = true;
    examineId.value = item.examineId;
    examineRecordId.value = item.examineRecordId;
    studentId.value = item.studentId;
    console.log('查询考核详情', item);
    getTp({
      examineId: item.examineId,
    }).then((res) => {
      if (res.code == 200) {
        console.log('查询考核图谱成功', res.data);
        optionsd.value = res.data;
      }
    });
  };

  const gostart = () => {
    if (medicineAtlasId.value) {
      router.push({
        name: 'exramxq',
        query: {
          examineId: examineId.value,
          studentId: studentId.value,
          examineRecordId: examineRecordId.value,
          medicineAtlasId: medicineAtlasId.value,
        },
      });
    } else {
      tipshow.value = true;
    }
  };
  //   查询考核详情代码结束
  const openEdittp = (item) => {
    addForms.value.publishStatus = item.publishStatus;
    addForms.value.examineId = item.examineId;
    tpid.value = item.examineId;
    // addForm.value = Object.assign({}, item);
    addShowtps.value = true;
    // 顺便查询一下是不是已经绑定了图谱
    getTpfn(item);
    console.log('查询图谱列表成功df', addForms.value);
  };

  const openEdittps = () => {
    addForms.value.examineId = tpid.value;
    addShowtp.value = true;
    //查询全部图谱列表
    tpList({
      pageNum: 1,
      pageSize: 100,
    }).then((res) => {
      if (res.code == 200) {
        console.log('查询图谱列表成功', res.data);
        options.value = res.data.list;
      }
    });
  };

  const changefn = (i) => {
    // 查询图谱id
    tpXq({
      medicineAtlasId: addForms.value.medicineAtlasId,
    }).then((res) => {
      optionss.value = res.data.typeList;
      optionsss.value = res.data.classList;
      console.log('查询图谱详情成功', res.data, optionsss.value);
    });
  };

  // 删除
  const openDelete = (item) => {
    Modal.confirm({
      title: '提示',
      content: '确认删除吗？',
      onOk() {
        delExa({
          examineId: item.examineId,
        }).then((res) => {
          if (res.code == '200') {
            Message.success({
              //   content: res.message,
              content: '删除成功',
            });
            fetchData();
          }
        });
      },
    });
  };
  const { loading, setLoading } = useLoading(true);
  // 新增
  const generateDataModel = () => {
    return {
      examineName: '',
      startTime: '',
      endTime: '',
      organizationId: '',
      remark: '',
    };
  };
  const generateDataModels = () => {
    return {
      medicineAtlasId: '',
      examineId: '',
      type: '',
      imgClassificationStr: [],
    };
  };
  const addForm = ref(generateDataModel());
  const addForms = ref(generateDataModels());
  const addShow = ref(false);
  const openAdd = (examineId) => {
    addShow.value = true;
    addForm.value = {
      ...generateDataModel(),
      examineId: examineId,
    };
  };
  const addModel = ref();
  const addModels = ref();
  const optionss = ref();
  const rules = {
    examineName: [
      {
        required: true,
        message: '请输入考试名称',
      },
      {
        maxLength: 20,
        message: '最长20位',
      },
    ],
    startTime: [
      {
        required: true,
        message: '请选择开始时间',
      },
    ],
    organizationId: [
      {
        required: true,
        message: '请选择班级',
      },
    ],
    endTime: [
      {
        required: true,
        message: '请选择结束时间',
      },
    ],
  };
  const ruless = {
    medicineAtlasId: [
      {
        required: true,
        message: '请选择图谱',
      },
    ],
  };
  const handleCheck = (done) => {
    if (loading.value) {
      done(false);
      return;
    }
    setLoading(true);
    setTimeout(() => {
      setLoading(false);
    }, 1500);
    addModel.value.validate(
      async (errors: undefined | Record<string, ValidatedError>) => {
        if (!errors) {
          if (addForm.value.examineId) {
            updateExa({
              examineId: addForm.value.examineId,
              examineName: addForm.value.examineName,
              startTime: addForm.value.startTime,
              endTime: addForm.value.endTime,
              organizationId: addForm.value.organizationId.toString(),
              remark: addForm.value.remark,
            }).then((res) => {
              if (res.code == '200') {
                if (addForm.value.publishStatus != 1) {
                  Message.success({
                    //   content: res.message,
                    content: '编辑成功',
                  });
                }
                done(true);
                fetchData();
              } else {
                done(false);
              }
            });
          } else {
            addExa({
              examineName: addForm.value.examineName,
              startTime: addForm.value.startTime,
              endTime: addForm.value.endTime,
              organizationId: addForm.value.organizationId.toString(),
              remark: addForm.value.remark,
            }).then((res) => {
              if (res.code == '200') {
                Message.success({
                  //   content: res.message,
                  content: '新增成功',
                });
                done(true);
                fetchData();
              } else {
                done(false);
              }
            });
          }
        } else {
          done(false);
        }
      }
    );
  };
  const handleChecktp = (done) => {
    if (loading.value) {
      done(false);
      return;
    }
    setLoading(true);
    setTimeout(() => {
      setLoading(false);
    }, 1500);
    addModels.value.validate(
      async (errors: undefined | Record<string, ValidatedError>) => {
        if (addForm.value.publishStatus != 1) {
        }
        if (!errors) {
          if (addForms.value.id) {
            done(false);
            addShowtp.value = false;
          } else {
            // log

            const stringValue = addForms.value.type;

            // const numberValue = Number(stringValue);
            // let  typem = Number()
            // if(addForms.value.type){
            // typem =
            // }

            console.log('当前分组', addForms.value.type);
            addtp({
              examineId: addForms.value.examineId,
              medicineAtlasId: addForms.value.medicineAtlasId,
              type: addForms.value.type ? Number(addForms.value.type) : null,
              imgClassificationStr: addForms.value.imgClassificationStr
                ? addForms.value.imgClassificationStr.toString()
                : '' || '',
            }).then((res) => {
              if (res.code == '200') {
                Message.success({
                  //   content: res.message,
                  content: '新增成功',
                });
                getTp({
                  examineId: addForms.value.examineId,
                }).then((res) => {
                  if (res.code == 200) {
                    console.log('查询该考试相关联的图谱', res.data);
                    examtplist.value = res.data;
                  }
                });
                done(true);
                fetchData();
                addForms.value = [];
              } else {
                done(true);
                addForms.value = [];
              }
            });
          }
        } else {
          done(false);
        }
      }
    );
  };
  const uppublish = (i) => {
    console.log('点击了', i);

    Uppublish({
      examineId: i.examineId,
      publishStatus: Number(i.publishStatus == 1 ? '0' : '1'),
      startTime: i.startTime,
    }).then((res) => {
      if (res.code == 200) {
        Message.success({
          //   content: res.message,
          content: '成功',
        });
        fetchData();
      }
    });
  };
  // 动态禁用日期测试
  const disabledDate = (time) => {
    // 确保 startTime 是一个有效的时间对象
    // 确保 startTime 是一个有效的时间对象
    const startTime = addForm.value.startTime
      ? new Date(addForm.value.startTime)
      : null;

    // 如果 startTime 存在，禁用 startTime 前一天的日期
    if (startTime) {
      const startOfDay = new Date(startTime);
      startOfDay.setHours(0, 0, 0, 0); // 设置为当天的开始时间
      const endOfDay = new Date(startTime);
      endOfDay.setHours(23, 59, 59, 999); // 设置为当天的结束时间

      // 禁用前一天的日期
      return time.getTime() < startOfDay.getTime();
    }

    return false; // 默认情况下不禁用任何日期
  };
  const disabledHours = () => {
    // 禁用小时数 0 和 1
    return {
      disabledMinutes: () => [
        1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20,
        21, 22, 23, 24, 25, 26, 27, 28, 29, 31, 32, 33, 34, 35, 36, 37, 38, 39,
        40, 41, 42, 43, 44, 45, 46, 47, 48, 49, 50, 51, 52, 53, 54, 55, 56, 57,
        58, 59,
      ],
      // disabledMinutes: () => range(0, 60).splice(0, min),
      // disabledSeconds: () => range(0, 60).splice(0, second),
    };
  };
  const generateFormModel = () => {
    return {
      examineName: '',
      startDate: '',
      endDate: '',
    };
  };

  const formModel = ref(generateFormModel());
  const renderData = ref([]);
  const renderDatas = ref([]);
  const onChangeTime = (startEnd, startEndOri) => {
    if (startEnd && startEnd.length == 2) {
      formModel.value.startDate = startEnd[0];
      formModel.value.endDate = startEnd[1];
    } else {
      formModel.value.startDate = '';
      formModel.value.endDate = '';
    }
  };

  const basePagination: Pagination = {
    current: 1,
    pageSize: 10,
    total: 0,
  };
  const pagination = reactive({
    ...basePagination,
    'hide-on-single-page': true,
    'show-total': true,
    'show-jumper': true,
    'show-page-size': true,
  });
  const basePaginations: Pagination = {
    current: 1,
    pageSize: 10,
    total: 0,
  };
  const paginations = reactive({
    ...basePaginations,
    'hide-on-single-page': true,
    'show-total': true,
    'show-jumper': true,
    'show-page-size': true,
  });
  const columns = computed<TableColumnData[]>(() => [
    {
      title: '考核ID',
      dataIndex: 'examineId',
    },
    {
      title: '考核名称',
      dataIndex: 'examineName',
    },
    {
      title: '考核班级',
      dataIndex: 'organizationName',
    },
    {
      title: '时限(分)',
      dataIndex: 'examineTime',
    },

    {
      title: '考核时间',
      dataIndex: 'startTime',
      slotName: 'startTime',
    },
    {
      title: '创建人',
      dataIndex: 'createUser',
    },
    {
      title: '考核状态',
      dataIndex: 'createTime',
      slotName: 'createTime',
    },

    {
      title: '功能',
      slotName: 'option',
    },
  ]);
  const columnss = computed<TableColumnData[]>(() => [
    {
      title: '考核记录ID',
      dataIndex: 'examineRecordId',
    },
    {
      title: '考核名称',
      dataIndex: 'examineName',
    },
    {
      title: '考核用户',
      dataIndex: 'studentName',
    },

    {
      title: '考核班级',
      dataIndex: 'organizationName',
    },
    {
      title: '考核用时',
      dataIndex: 'examineTime',
    },

    {
      title: '考核状态',
      dataIndex: 'examineStatus',
      slotName: 'createTime',
    },

    {
      title: '考核详情(正确/错误)',
      slotName: 'option',
      align: 'center',
    },
  ]);
  const treeData = ref([]);
  const fetchData = async () => {
    setLoading(true);
    try {
      const data = {
        pageNum: pagination.current,
        ...pagination,
        ...formModel.value,
      };
      examineList(data).then((res) => {
        renderData.value = res.data.list;
        pagination.total = res.data.total;
        pagination.current = res.data.pageNum;
      });

      organizationTree().then((res) => {
        if (res.code == 200) {
          treeData.value = res.data;
        }
      });
    } catch (err) {
      console.log(err);
    } finally {
      setLoading(false);
    }
  };

  const onPageChange = (current: number) => {
    pagination.current = current;
    fetchData();
  };
  const onPageSizeChange = (pageSize: number) => {
    pagination.pageSize = pageSize;
    fetchData();
  };
  const onPageChanges = (current: number) => {
    paginations.current = current;
    // fetchData();
  };
  const onPageSizeChanges = (pageSize: number) => {
    paginations.pageSize = pageSize;
    // fetchData();
  };

  const khxqshow = ref(false);
  const resets = () => {
    khxqshow.value = false;
  };
  const reset = () => {
    formModel.value = generateFormModel();
    fetchData();
  };
  fetchData();
  const timerfn = (i) => {
    // 将时间字符串解析为 Date 对象
    const givenDate = new Date(i.replace(' ', 'T')); // 需要将空格替换为 'T'，以符合 ISO 8601 格式

    // 获取当前时间
    const currentDate = new Date();

    // 比较时间
    return givenDate > currentDate;
  };
  const router = useRouter();
  const openOper = () => {
    router.push({
      name: 'operlogs',
    });
  };
</script>
<style scoped>
  .fbbox {
    cursor: pointer;
    color: rgb(48, 155, 255);
  }
  .tplistbd {
    display: flex;
    font-size: 16px;
  }
  .jbred {
    color: red;
    cursor: pointer;
    margin: 5px 0;
  }
  .tpnamelist {
    width: 430px;
    text-wrap: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .addtpbd {
    width: 300px;

    padding: 5px 0;
    display: flex;
    font-size: 16px;
    align-items: center;
    justify-content: center;
    border: 1px solid #d3d3d3;
    border-radius: 10px;
    margin: 20px auto;
    cursor: pointer;
    cursor: pointer;
  }
  .tcbox {
    width: 713px;
    height: 229px;
    background: #ffffff;
    border-radius: 0px 0px 0px 0px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 999;
    display: flex;
    flex-direction: column;
  }
  .tctopbox {
    width: 100%;
    height: 46px;
    background: #cfcfcf;
    display: flex;
    align-items: center;
  }
  .tcclose {
    position: absolute;
    right: 10px;
    cursor: pointer;
  }
  .tctopname {
    font-size: 16px;
    color: #000000;
    margin: 0 auto;
  }
  .tcmainbox {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 0;
  }
  .tcmainitem {
    display: flex;
    align-items: center;
    margin: 0 auto;
    border: 1px solid #c1c1c1;
    width: 491px;
    height: 44px;
  }
  .tcitemname {
    width: 175px;
    height: 44px;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-right: 1px solid #c1c1c1;
  }
  .tcitdes {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
  }
  .zzcbox {
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    z-index: 99;
    position: absolute;
    top: 0;
    left: 0;
  }
  .startbox {
    width: 112px;
    height: 37px;
    background: linear-gradient(180deg, #ffffff 0%, #c0c0c0 100%);
    border-radius: 4px 4px 4px 4px;
    border: 1px solid #999999;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    cursor: pointer;
    font-size: 16px;
  }
  .tsred {
    color: red;

    position: absolute;
    bottom: 75px;
    left: 50%;
    transform: translate(-50%, 0);
  }
</style>
